<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础测试</title>
    <style>
        .div-container {
            position: relative;
            border-radius: 6px;
        }

        .copy-div {
            position: absolute;
            top: 6px;
            right: 10px;
            z-index: 2;
        }

        .code-div {
            z-index: 1;
            background-color: gray;
            border-radius: 8px;
        }

        code {
            overflow-x: auto !important;
            font-size: 14px;
            font-family: "Courier New", Courier, monospace;
            display: block;
            white-space: pre;
            margin: 0;
            font-weight: bold;
        }

        pre {
            background-color: #f3f3f3;
            padding: 10px;
            line-height: 1.2;
            margin: 0;
            border-radius: 6px;
        }

        body {
            width: 50vw;
            margin: auto;
        }

        #message-container {
            position: fixed;
            z-index: 1000;
            top: 16px;
            margin: 0 auto;
            width: 25%;
            box-sizing: border-box;
            justify-content: center;
            display: flex;
            flex-direction: column;
        }

        .message {
            position: relative;
            min-width: 300px;
            max-width: calc(100% - 32px);
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
            border-radius: 4px;
            padding: 16px 20px;
            opacity: 0;
            transform: translateY(-10px);
            transition: all 0.3s ease-in-out;
            background-color: #f0f9eb;
            color: #67c23a;
            margin: 16px auto;
        }

        .message.center {
            left: 50%;
            transform: translateX(-50%);
        }

        .message.show {
            opacity: 1;
            transform: translateY(0);
        }

        .message .close-btn {
            position: absolute;
            top: 8px;
            right: 8px;
            cursor: pointer;
            font-size: 14px;
            color: #909399;
        }

        .message .close-btn:hover {
            color: #409EFF;
        }
    </style>
</head>
<body>

<div id="message-container"></div>

<div class="div-container" data-code-id="code1">
    <div class="copy-div" id="copyBtn1" style="display: none;">
        <button class="btn btn-sm btn-success" type="button" onclick="copyData(this)">复 制</button>
    </div>
    <div class="code-div" onmouseenter="showCopyButton('copyBtn1')"
         onmouseleave="hideCopyButton('copyBtn1')">
                        <pre><code class="language-json" id="code-id-1">{{ showStr 测试123}}
                        撒旦发生发射点手动阀手动阀
                        十分骄傲是独立访客sdfasdf
                        十点十分</code></pre>
    </div>
</div>

<br>

<!-- 第二个代码块复制按钮和容器修正 -->
<div class="div-container" data-code-id="code2">
    <div class="copy-div" id="copyBtn2" style="display: none;">
        <button class="btn btn-sm btn-success" type="button" onclick="copyData(this)">复 制</button>
    </div>
    <div class="code-div" onmouseenter="showCopyButton('copyBtn2')" onmouseleave="hideCopyButton('copyBtn2')">
                        <pre><code class="language-json" id="code-id-2">测试123
                        撒旦发生发射点手动阀手动阀
                        十分骄傲是独立访客sdfasdf
                        十点十分</code></pre>
    </div>
</div>


<script>
    function createMessage(options = {}) {
        const container = document.getElementById('message-container');

        const messageEl = document.createElement('div');
        messageEl.classList.add('message');
        messageEl.classList.add('center');

        const closeButton = document.createElement('i');
        closeButton.classList.add('message', 'close-btn');
        closeButton.innerHTML = '&times;';
        closeButton.addEventListener('click', () => messageEl.remove());

        messageEl.appendChild(closeButton);

        const contentEl = document.createElement('p');
        contentEl.innerHTML = options.message;
        messageEl.appendChild(contentEl);
        container.appendChild(messageEl);

        setTimeout(() => {
            messageEl.classList.add('show');
        });

        if (options.duration > 0) {
            setTimeout(() => {
                messageEl.classList.remove('show');
                setTimeout(() => messageEl.remove(), 300);
            }, options.duration);
        }
    }

    let mouseEnterTimeoutId = null; // 存储延迟显示按钮的定时器ID
    let mouseLeaveTimeoutId = null; // 存储延迟隐藏按钮的定时器ID

    function showCopyButton(copyBtnId) {
        clearTimeout(mouseLeaveTimeoutId); // 清除可能存在的隐藏按钮定时器

        // 设置一个短时延后显示按钮，防止快速移动导致闪烁
        mouseEnterTimeoutId = setTimeout(() => {
            document.getElementById(copyBtnId).style.display = 'block';
        }, 200);
    }

    function hideCopyButton(copyBtnId) {
        clearTimeout(mouseEnterTimeoutId); // 清除可能存在的显示按钮定时器

        // 设置一个稍长时延后隐藏按钮，确保用户有足够时间完成交互
        mouseLeaveTimeoutId = setTimeout(() => {
            document.getElementById(copyBtnId).style.display = 'none';
        }, 1000);
    }

    function copyData(button) {
        const codeId = button.parentNode.parentNode.dataset.codeId;
        const codeElement = document.querySelector(`[data-code-id="${codeId}"] .code-div code`);
        const content = codeElement.innerText
        navigator.clipboard.writeText(content);
        createMessage({message: '复制 ' + content + '内容成功', duration: 1000})
    }
</script>
</body>
</html>